<template>
  <div id="category-page">
    <v-card flat class="elevation-1 mb-3 pa-2">
      <v-card-title primary-title>
        <div class="title">栏目：123123</div>
      </v-card-title>
      <div class="hr-line-dashed"></div>
      <v-card-text>
        <v-btn
          small
          v-for="(category,index) in categories"
          :key="index"
          :to="{name:'category',params:{id:category.id}}"
          :color="category.color"
        >{{category.name}}</v-btn>
      </v-card-text>
    </v-card>
    <v-card
      flat
      hover
      v-for="article in articles"
      :key="article.id"
      class="elevation-1 mb-3 pa-2"
      tile
    >
      <v-card-title primary-title>
        <div>
          <div class="headline">{{ article.title }}</div>
          <p class="text-xs-left grey--text">
            {{ article.updated_at }}&nbsp;/&nbsp;
            <v-icon small>far fa-eye</v-icon>&nbsp;123&nbsp;/&nbsp;
            <v-icon small>far fa-comments</v-icon>&nbsp;123&nbsp;
          </p>
        </div>
      </v-card-title>
      <v-card-text>{{ article.description }}</v-card-text>
      <v-card-actions>
        <v-btn flat color="red">分享</v-btn>
        <v-btn flat color="indigo">概览</v-btn>
        <v-spacer></v-spacer>
        <v-btn flat :to="{name:'article',params:{id:article.id}}">
          <v-icon small>fas fa-eye</v-icon>&nbsp;查看全文
        </v-btn>
      </v-card-actions>
    </v-card>
    <div class="text-xs-center">
      <v-pagination v-model="page" :length="6"></v-pagination>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data: () => ({
    show: false,
    page: 1,
    categories: [],
    articles: []
  }),
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: 'init'
  },
  methods: {
    init() {
      let _this = this
      request.get('/posts').then(res => {
        _this.articles = res.data.posts
      })
      request.get('/categories').then(res => {
        _this.categories = res.data.categories
      })
    }
  },
  created() {
    this.init()
  }
}
</script>

